<script setup lang="ts">
import { getAllDep } from '@/services/consult'
import type { TopDep } from '@/types/consult'
import { computed, onMounted, ref } from 'vue'
import { useConsultStore } from '@/stores'
const consultStore = useConsultStore()

// 选中的顶级部门索引
const active = ref(0)

// 获取顶级部门列表
const depList = ref<TopDep[]>([])
const getDepList = async () => {
  const res = await getAllDep()
  depList.value = res.data
}

// 计算顶级部门下的子部门的值
// 知识点【计算属性的使用场景】：可以用点击事件实现，但是最简单的还是计算属性
const subDepList = computed(() => {
  return depList.value[active.value]?.child
})

onMounted(() => {
  getDepList()
})
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in depList" :key="item.id" :title="item.name" />
      </van-sidebar>
      <div class="sub-dep">
        <router-link
          to="/consult/illness"
          v-for="item in subDepList"
          :key="item.id"
          @click="consultStore.setDepId(item.id)"
        >
          {{ item.name }}
        </router-link>
        <div v-if="Array.isArray(subDepList) && !subDepList.length" class="empty-dep">
          抱歉，该科室暂时没有开放。
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
.consult-dep-page {
  padding-top: 46px;
  .wrapper {
    height: calc(100vh - 46px);
    overflow: hidden;
    display: flex;
    .sub-dep {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      > a {
        display: block;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
      .empty-dep {
        padding: 14px 30px;
        color: var(--cp-light);
      }
    }
  }
}
</style>
